<script setup>
import { ref, watch } from 'vue'
import { Delete, Edit } from '@element-plus/icons-vue'
import ChannelSelect from './components/ChannelSelect.vue'
import { useArticleStore } from '@/stores/index'
import ArticleEdit from './components/ArticleEdit.vue'

// 定义请求参数对象
// 1. 只保留必要的 params（cate_id 和 state），分页状态直接用 Pinia 的！
const params = ref({
  cate_id: 44160,
  state: '',
})
const articleStore = useArticleStore()
// const articleList = ref([]) //文章列表
// const pageSize = ref(0)

// const total = ref(0) //总条数
// const getArticleList = () => {
//   pageSize.value = articleStore.pageSize
//   console.log(articleStore.pageSize)
// }
// getArticleList()

const onSizeChange = (size) => {
  if (typeof size !== 'number' || size < 1) {
    console.warn('每页条数必须是大于 0 的整数！')
    return
  }
  // 直接调用 Pinia 方法，无需同步组件 params（Pinia 内部会处理状态更新）
  articleStore.setPageSize(size)
}

// 2. 处理“页码变化”：直接调用 Pinia 的 setCurrentPage 方法
const onCurrentChange = (page) => {
  articleStore.setCurrentPage(page)
}

// 基于params参数，获取文章列表
// 编辑逻辑
const onEditArticle = (row) => {
  artcleEditRef.value.open(row)
}
// 删除逻辑
const onDeleteArticle = (row) => {
  ElMessageBox.confirm('你确定要删除吗？', '温馨提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    ElMessage({
      type: 'success',
      message: '删除成功',
    })
    // 删除操作
    articleStore.delArticleList(row.id)
  })
}

// 抽屉组件实列
const artcleEditRef = ref()
// 添加文章逻辑
const onAddArtcile = () => {
  // 调用组件里的方法open
  artcleEditRef.value.open({})
}

// 添加或者编辑成功的回调

// 搜索逻辑
const onSearch = () => {
  // 1. 调用 Pinia 的 setFilterParams 方法，传递筛选条件
  articleStore.setFilterParams({
    cate_id: params.value.cate_id, // 组件选择的分类ID（如45007=体育）
    state: params.value.state, // 组件选择的发布状态（如“已发布”“草稿”）
  })

  // 2. 可选：控制台打印筛选条件，便于调试
  console.log('当前筛选条件：', {
    分类ID: params.value.cate_id,
    发布状态: params.value.state || '全部',
  })
}
// 重置逻辑
const onReset = () => {
  // 1. 调用 Pinia 的 resetFilterParams 方法，重置筛选条件和页码
  articleStore.resetFilterParams()

  // 2. 同步组件的 params 到初始值（与 Pinia 筛选条件保持一致）
  params.value = {
    cate_id: 44160, // 初始默认分类：程序员（ID=44160）
    state: '', // 初始默认状态：空（即“全部”）
  }

  // 3. 可选：控制台打印重置提示，便于调试
  console.log('筛选条件已重置：默认显示「程序员分类」的全部文章')
}
// 监听 Pinia 筛选条件变化，同步到组件 params
watch(
  () => articleStore.filterParams,
  (newFilter) => {
    params.value = { ...newFilter }
  },
  { immediate: true }, // 初始化时立即同步（解决刷新后状态不一致）
)
</script>
<template>
  <page-container title="文章管理">
    <template #extra>
      <el-button type="primary" @click="onAddArtcile">添加文章</el-button>
    </template>
    <!-- 表单区域 -->
    <el-form inline>
      <el-form-item label="文章分类">
        <!-- Vue2 => v-model :value 和 @input 的简写 -->
        <!-- Vue3 => v-model :modelValue 和 @update:modelValue 的简写 -->

        <!-- Vue3 => v-model:cid  :cid 和 @update:cid 的简写 -->
        <ChannelSelect v-model="params.cate_id" width="150px"></ChannelSelect>
      </el-form-item>
      <el-form-item label="发布状态">
        <el-select style="width: 150px" v-model="params.state">
          <!-- 这里后台标记发布状态，就是通过中文标记的， 已发布 / 草稿 -->
          <el-option label="已发布" value="已发布"></el-option>
          <el-option label="草稿" value="草稿"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格区域 -->
    <el-table :data="articleStore.currentPageArticles" style="width: 100%">
      <el-table-column label="文章标题" prop="title">
        <template #default="{ row }">
          <el-link type="primary" :underline="false">{{ row.title }}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="分类" prop="cate_name"> </el-table-column>
      <el-table-column label="发表时间" prop="pub_date"> </el-table-column>
      <el-table-column label="状态" prop="state"> </el-table-column>
      <!-- 利用作用域插槽 row 可以获取当前行的数据 => v-for时 遍历 item -->
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button
            circle
            plain
            type="primary"
            :icon="Edit"
            @click="onEditArticle(row)"
          ></el-button>
          <el-button
            circle
            plain
            type="danger"
            :icon="Delete"
            @click="onDeleteArticle(row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <el-pagination
      class="fixed-pagination"
      v-model:current-page="articleStore.currentPage"
      v-model:page-size="articleStore.pageSize"
      :page-sizes="[2, 3, 4, 5]"
      :background="true"
      layout="jumper,total, sizes, prev, pager, next"
      :total="articleStore.filteredArticleTotal"
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
      style="margin-top: 20px; justify-content: end"
    />
    <!--@size-change="onSizeChange"  控制每个页面条数 页面条数变化触发里面的函数并且有一个页面条数的值
      @current-change="onCurrentChange" 控制当前页面  页面变化 触发里面的函数并且传过去当前在第几页  -->

    <!-- 添加编辑的抽屉 -->
    <ArticleEdit ref="artcleEditRef"></ArticleEdit>
  </page-container>
</template>

<style lang="scss" scoped>
// 固定分页到右下角
.fixed-pagination {
  position: fixed; // 固定定位（相对于浏览器窗口）
  bottom: 20px; // 距离浏览器底部 20px（可根据需求调整）
  right: 30px; // 距离浏览器右侧 30px（可根据需求调整）
  z-index: 100; // 层级高于表格（避免被遮挡）
  background: #fff; // 背景色（避免与页面背景融合，增强可读性）
  padding: 8px 16px; // 内边距（优化点击区域和视觉效果）
  border-radius: 4px; // 圆角（与 Element Plus 风格统一）
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); // 轻微阴影（增强层次感）
  min-width: 600px; // 最小宽度（避免分页元素挤压变形）
}

// 响应式适配：小屏幕下（如平板/手机）调整位置和宽度
@media (max-width: 768px) {
  .fixed-pagination {
    right: 10px; // 减小右侧间距
    bottom: 10px; // 减小底部间距
    min-width: auto; // 取消最小宽度，自适应屏幕
    width: calc(100% - 20px); // 宽度占满屏幕（减去左右间距）
  }
}
</style>
